<script setup lang="ts">
import { reactive, ref } from "vue"
import Main from "../../main";
import { Cell } from "pack-antv-x6";
import { ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton } from "element-plus"

const props = defineProps<{ main: Main, cell: Cell }>();
//
const { main, cell } = props;
//
const sd = main.cells.getData(cell) || {}
//
const model = reactive<any>({ exp: "", ctx: { ...sd } })
const context = reactive<any[]>(Object.keys(sd).map(k => ({ key: k, val: sd[k] })));
//
const handleAdd = () => {
    context.push({ key: "", val: "" })
}
const handleDel = (index: number) => {
    context.splice(index, 1)
}
const handleChange = () => {
    model.ctx = {}
    for (const d of context) {
        const { key, val } = d;
        model.ctx[key] = val;
    }
}
//
const elFormRef = ref<InstanceType<typeof ElForm>>();
const handleSubmit = async () => {
    handleChange();
    try {
        await elFormRef.value?.validate();
    } catch (error) {
        return;
    }
    main.cells.setData(cell, model);

}
const handleCancel = () => {
    main.drawer.close();
}
</script>

<template>
    <div class="w-full h-full relative flex flex-col">
        <div class="flex h-40px justify-between">
            <div></div>
            <div>
                <ElButton type="info" plain @click="handleCancel">取消</ElButton>
                <ElButton type="success" plain @click="handleSubmit">保存</ElButton>
            </div>
        </div>
        <div class="flex-1 overflow-auto">
            <ElForm :model="model" ref="elFormRef">
                <ElFormItem label="for 循环表达式" prop="exp">
                    <ElInput v-model="model.exp"></ElInput>
                </ElFormItem>

                <ElTable :data="context">
                    <ElTableColumn label="键名" prop="key">
                        <template #default="{ row }">
                            <ElInput v-model="row.key"></ElInput>
                        </template>
                    </ElTableColumn>
                    <ElTableColumn label="值" prop="val">
                        <template #default="{ row }">
                            <ElFormItem :prop="['ctx',row.key]">
                                <ElInput v-model="row.val"></ElInput>
                            </ElFormItem>
                        </template>
                    </ElTableColumn>
                    <ElTableColumn>
                        <template #header>
                            <ElButton type="success" plain @click="handleAdd">
                                <div class="i-tabler:abacus-off w-1em h-1em"></div>
                            </ElButton>
                            <ElButton type="success" @click="handleChange">
                                <div class="i-dashicons:saved w-1em h-1em"></div>
                            </ElButton>
                        </template>
                        <template #default="{ $index }">
                            <ElButton type="danger" @click="handleDel($index)">
                                <div class="i-mdi-light:delete w-1em h-1em"></div>
                            </ElButton>
                        </template>
                    </ElTableColumn>
                </ElTable>
            </ElForm>
        </div>
    </div>
</template>